<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
      </view>
    </view>

    <!-- 个人信息卡片 -->
    <view class="profile-section">
      <view class="avatar-circle">
        <image class="avatar-image" :src="userInfo.avatar" mode="aspectFit" />
      </view>
      <view class="profile-card">
        <view class="user-info">
          <view class="name-vip-row">
            <text class="username">{{ userInfo.name }}</text>
            <view v-if="userInfo.vip" class="vip-badge">
              <image class="vip-icon" src="/static/Sliver-vip.png" mode="aspectFit" />
            </view>
          </view>
          <view class="user-meta">
            <text class="meta-item">{{ userInfo.school }}</text>
            <text class="meta-divider">｜</text>
            <text class="meta-item">{{ userInfo.class }}</text>
            <text class="meta-divider">｜</text>
            <text class="meta-item">{{ userInfo.phone }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 会员推广区域 -->
    <view class="vip-promotion">
      <view class="vip-content">
        <view class="vip-left">
          <image class="vip-icon-large" src="/static/vip-icon.png" mode="aspectFit" />
          <view class="vip-text-content">
            <text class="vip-title">开通会员</text>
            <text class="vip-desc">解锁懂了么所有会员功能</text>
          </view>
        </view>
        <button class="activate-btn" @tap="goToVipPurchase">立即激活</button>
      </view>
    </view>

    <!-- 用户活动统计 -->
    <view class="stats-section">
      <view class="stats-container">
        <view class="stat-item">
          <text class="stat-label">组卷</text>
          <text class="stat-number">{{ userInfo.stats.assemblePapers }}<text class="stat-unit">份</text></text>
        </view>
        <view class="stat-item">
          <text class="stat-label">下载</text>
          <text class="stat-number">{{ userInfo.stats.downloads }}<text class="stat-unit">次</text></text>
        </view>
        <view class="stat-item" @tap="goToRedeemPoints">
          <text class="stat-label">积分</text>
          <text class="stat-number">{{ userInfo.stats.points }}<text class="stat-unit">分</text></text>
        </view>
      </view>
    </view>

    <!-- 资料管理 -->
    <view class="data-management">
      <text class="section-title">资料管理</text>
      <view class="management-icons">
        <view class="management-item" @tap="goToAssemblePapers">
          <view class="management-icon assemble-icon">
            <image class="icon-img" src="/static/myPaper.png" mode="aspectFit" />
          </view>
          <text class="management-label">我的组卷</text>
        </view>
        <view class="management-item" @tap="goToCollection">
          <view class="management-icon collection-icon">
            <image class="icon-img" src="/static/paperCollection.png" mode="aspectFit" />
          </view>
          <text class="management-label">试卷收藏</text>
        </view>
        <view class="management-item" @tap="goToDownloads">
          <view class="management-icon download-icon">
            <image class="icon-img" src="/static/myDownload.png" mode="aspectFit" />
          </view>
          <text class="management-label">我的下载</text>
        </view>
      </view>
    </view>

    <!-- 设置和帮助列表 -->
    <view class="settings-list">
      <view class="list-item" @tap="goToInviteFriends">
        <view class="item-left">
          <view class="item-icon invite-icon">
            <image class="icon-img" src="/static/invitation.png" mode="aspectFit" />
          </view>
          <text class="item-text">邀请学友</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
      
      <view class="list-item" @tap="goToCustomerService">
        <view class="item-left">
          <view class="item-icon service-icon">
            <image class="icon-img" src="/static/onlineService.png" mode="aspectFit" />
          </view>
          <text class="item-text">在线客服</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
      
      <view class="list-item" @tap="goToAboutUs">
        <view class="item-left">
          <view class="item-icon about-icon">
            <image class="icon-img" src="/static/aboutUs.png" mode="aspectFit" />
          </view>
          <text class="item-text">关于我们</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
      
      <view class="list-item" @tap="goToFAQ">
        <view class="item-left">
          <view class="item-icon faq-icon">
            <image class="icon-img" src="/static/questions.png" mode="aspectFit" />
          </view>
          <text class="item-text">常见问题</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
      
      <view class="list-item" @tap="goToOrders">
        <view class="item-left">
          <view class="item-icon order-icon">
            <image class="icon-img" src="/static/myOrders.png" mode="aspectFit" />
          </view>
          <text class="item-text">我的订单</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
      
      <view class="list-item" @tap="goToFeedback">
        <view class="item-left">
          <view class="item-icon feedback-icon">
            <image class="icon-img" src="/static/feedback.png" mode="aspectFit" />
          </view>
          <text class="item-text">意见反馈</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
      
      <view class="list-item" @tap="goToSettings">
        <view class="item-left">
          <view class="item-icon settings-icon">
            <image class="icon-img" src="/static/setting.png" mode="aspectFit" />
          </view>
          <text class="item-text">设置</text>
        </view>
        <view class="item-arrow">
          <image class="arrow-img" src="/static/gray-right-arrow.png" mode="aspectFit" />
        </view>
      </view>
    </view>


  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 系统信息
const statusBarHeight = ref(0)

// 用户信息数据
import { getCurrentInstance } from 'vue'

const { appContext } = getCurrentInstance() || {}
const globalProps = appContext?.app?.config?.globalProperties || {}
const userUtils = globalProps.$user

const userInfo = ref({
  name: '',
  school: '',
  class: '',
  phone: '',
  avatar: '',
  vip: '',
  stats: {
    assemblePapers: 6,
    downloads: 0,
    points: 898
  }
})





// 资料管理功能
const goToAssemblePapers = () => {
  uni.showToast({
    title: '我的组卷',
    icon: 'none'
  })
}

const goToCollection = () => {
  uni.showToast({
    title: '试卷收藏',
    icon: 'none'
  })
}

const goToDownloads = () => {
  uni.showToast({
    title: '我的下载',
    icon: 'none'
  })
}

import { goTo } from '@/utils/navigation.js'

// 设置和帮助功能
const goToInviteFriends = () => {
  goTo('/subpackages/user-center/InviteRegistration')
}

const goToCustomerService = () => {
  uni.showToast({
    title: '在线客服',
    icon: 'none'
  })
}

const goToAboutUs = () => {
  uni.showToast({
    title: '关于我们',
    icon: 'none'
  })
}

const goToFAQ = () => {
  uni.showToast({
    title: '常见问题',
    icon: 'none'
  })
}

const goToOrders = () => {
  uni.showToast({
    title: '我的订单',
    icon: 'none'
  })
}

const goToFeedback = () => {
  uni.showToast({
    title: '意见反馈',
    icon: 'none'
  })
}

const goToSettings = () => {
  goTo('/subpackages/user-center/settings')
}

// VIP购买页面跳转
const goToVipPurchase = () => {
  goTo('/subpackages/user-center/showMeTheMoney')
}

// 积分兑换页面跳转
const goToRedeemPoints = () => {
  goTo('/subpackages/user-center/redeemPoints')
}

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0

  const storedInfo = userUtils?.getUserInfo?.()
  if (storedInfo) {
    userInfo.value = {
      ...userInfo.value,
      name: storedInfo.userName || userInfo.value.name,
      school: storedInfo.dictName || userInfo.value.school,
      class: storedInfo.class_name || uni.getStorageSync('className') || userInfo.value.class,
      phone: storedInfo.bindPhone || storedInfo.phone || uni.getStorageSync('phone') || userInfo.value.phone,
      avatar: storedInfo.user_avatar || userInfo.value.avatar
    }
  }
})
</script>

<style scoped lang="scss">
// 复用learningStatus.vue中的样式
.page {
  min-height: 100vh;
  background:
    linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,1) 100%),
    linear-gradient( 270deg, #ACFB97 0%, rgba(52,207,185,0) 100%),
    linear-gradient( 270deg, rgba(95,141,227,0) 0%, #00C9FF 100%),
    linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  position: relative;
}

.status-bar {
  width: 100%;
}

.custom-navbar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx 64rpx;
  position: relative;
}

.navbar-content {
  display: flex;
  align-items: center;
  font-family: FontName, FontName;
  font-weight: 400;
  font-size: 56rpx;
  color: #191E31;
  line-height: 64rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.app-icon {
  width: 64rpx;
  height: 64rpx;
  background: rgba(255,255,255,1);
  border-radius: 36rpx;
  border: 2rpx solid #FFFFFF;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-logo {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
}

.app-title {
  font-family: 腾讯体, 腾讯体;
  font-weight: 400;
  font-size: 56rpx;
  color: #191E31;
  line-height: 56rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.profile-section {
  width: 702rpx;
  height: 128rpx;
  background: linear-gradient(114deg, #F0FFFD 0%, #FCFCFD 100%);
  box-shadow: 
    0 0 0 4rpx rgba(65, 214, 240, 0.3),
    0 0 0 8rpx rgba(182, 243, 188, 0.2),
    0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border-radius: 24rpx;
  position: relative;
  margin: 0rpx 24rpx 32rpx 24rpx;
}

.avatar-circle {
  background-color: white;
  position: absolute;
  left: 24rpx;
  bottom: 24rpx;
  width: 144rpx;
  height: 144rpx;
  border-radius: 72rpx;
  border: 4rpx solid #FFFFFF;
  box-shadow: 0 4rpx 16rpx rgba(56, 70, 77, 0.25);
  z-index: 10;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 72rpx;
}

.profile-card {
  justify-content: center;
  display: flex;
  align-items: center;
  padding-left: 192rpx;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 14rpx;
}

.name-vip-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.username {
  font-family: MiSans, MiSans;
  font-weight: 600;
  font-size: 36rpx;
  color: #3B3B3B;
  line-height: 48rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-right: 20rpx;
}

.vip-badge {
  display: flex;
  align-items: center;
}

.vip-icon {
  width: 139rpx;
  height: 39rpx;
}

.user-meta {
  display: flex;
  align-items: center;
  font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #68708A;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 8rpx;
}

.meta-divider {
  color: #ccc;
  margin: 0 8rpx;
}

.phone-number {
  font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #68708A;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

// 会员推广区域
.vip-promotion {
  height: 92rpx;
  margin: 0 24rpx 32rpx 24rpx;
  background: linear-gradient( 90deg, #F8E6CA 0%, #E7BC81 100%), linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%) ;
  border-radius: 12rpx;
  padding: 18rpx 32rpx;
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border: 2rpx solid;
  border-image: linear-gradient(90deg, rgba(247, 223, 195, 1), rgba(219, 175, 123, 1)) 2 2;
}

.vip-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vip-left {
  display: flex;
  align-items: center;
}

.vip-icon-large {
  width: 84rpx;
  height: 84rpx;
  margin-right: 24rpx;
}

.vip-text-content {
  display: flex;
  flex-direction: column;
  margin-right: 66rpx;
}

.vip-title {
  font-family: MiSans, MiSans;
  font-weight: 600;
  font-size: 32rpx;
  color:  #A55326;
  line-height: 48rpx;
  margin-bottom: 8rpx;
}

.vip-desc {
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 28rpx;
  color: #A55326;
  line-height: 28rpx;
}

.activate-btn {
  background:  #2E2826;
  border-radius: 40rpx;
  font-family: MiSans, MiSans;
  font-weight: 500;
  font-size: 24rpx;
  color: #EFD8B1;
  line-height: 24rpx;
  display:inline-block;
  padding: 12rpx 20rpx;
  margin: auto 0;
}

// 用户活动统计
.stats-section {
  margin: 0 24rpx 32rpx 24rpx;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
}

.stat-item {
  height: 116rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  background: linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  border-radius: 12rpx;
  padding-top: 32rpx;
  transition: all 0.3s ease;
}

.stat-item:active {
  transform: scale(0.95);
  background: linear-gradient( 114deg, #E0F5F0 0%, #E8F8F0 100%);
}

.stat-number {
  font-family: DINPro, DINPro;
  font-weight: bold;
  font-size: 40rpx;
  line-height: 40rpx;
  margin-top: 12rpx;
}

.stat-unit {
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 24rpx;
  color: #202020;
}

.stat-label {
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 28rpx;
  color: #68708A;
  line-height: 38rpx;
}

// 资料管理
.data-management {
  margin: 0 24rpx 32rpx 24rpx;
  background: linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  border-radius: 12rpx;
  padding: 24rpx;
}

.section-title {
  font-family: MiSans, MiSans;
  font-weight: 600;
  font-size: 32rpx;
  color: #343034;
  line-height: 48rpx;
  margin-bottom: 24rpx;
  display: block;
}

.management-icons {
  display: flex;
  justify-content: space-between;
  //padding: 32rpx;
}

.management-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.management-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.assemble-icon {
  background: #E3F2FD;
}

.collection-icon {
  background: #E8F5E8;
}

.download-icon {
  background: #FFF3E0;
}

.icon-img {
  width: 72rpx;
  height: 72rpx;
}

.management-label {
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 24rpx;
  color:  #333333;
  line-height: 32rpx;
}

// 设置和帮助列表
.settings-list {
  margin: 0 24rpx 32rpx 24rpx;
  background: linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  border-radius: 12rpx;
  overflow: hidden;
  padding: 16rpx;
}

.list-item {
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.list-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}



.item-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #3B4568;
  line-height: 40rpx;
}

.item-arrow {
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-img {
  width: 100%;
  height: 100%;
}


</style>
